<template>
  <div class="catalog-detail-wrap">
		<div class="back-wrap" @click="handleBack"><i class="iconfont icon-back-new"></i>{{catalogDetailData.name}}</div>
		<swiper class="swiper-wrap" :options="swiperOption" >
			<swiper-slide v-for="(item, index) of imagesData" class="slide-imgs" :key="index" v-lazy-container="{ selector: 'img'}">
					<img :data-src="item" :data-loading="require('./assets/loading-nobg.gif')" >
			</swiper-slide>
			<swiper-slide class="slide" v-if="vipRes.code === '200' && !vipFlag">
				<div class="last-slide">
					<p class="last-silde-text">开通会员可以查看博物馆内所有分类<br/>的藏品，还会不定期更新哦！</p>
					<img src="./assets/open-member-s.png" class="last-silde-text-img" @click="handleOpen">
				</div>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
		<div class="text-wrap">
			<p class="text" v-if="catalogDetailData.remarks" v-html="$utils.transformTextArea(catalogDetailData.remarks)"></p>
		</div>
		<div class="text-shadow"></div>
		<div class="btn-wrap" @click="handleOpen" v-if="vipRes.code === '200'">
			<img src="./assets/open-member.png" v-if="!vipFlag && vipRes">
			<img src="./assets/see-all.png" v-if="vipRes && vipFlag">
		</div>
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css'
	import { VueLazyload } from 'vue-lazyload'
	import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper' 
  export default {
		components: {
      swiper,
			swiperSlide,
			VueLazyload
		},
    data() {
      return {
				swiperOption: {
					pagination: {
						el: '.swiper-pagination'
					}
				},
				imagesData: [],
				catalogDetailData: {},
				vipFlag: false,
				vipRes: {}
      }
		},

		methods: {
			handleOpen() {
				if (this.vipFlag) {
					this.$router.push(`/product-detail/${this.$route.params.kid}/${this.catalogDetailData.name}`)
				} else {
					this.$router.push(`/purchase`)
				}
			},
			handleBack() {
				this.$router.back();
			}
		},
		async created() {
			let res = await this.$http.get('/lovelorn/v1.3/pb/museum-classifys/action/selectById', 
			{params: {kid: this.$route.params.kid}});
			this.catalogDetailData = res.data.data || {};
			this.imagesData = this.catalogDetailData.imgUrl.split('@@');
			let vipRes = await this.$http.post('/lovelorn/v1.3/pt/museum-orders/action/vip-info');
			this.vipRes = vipRes.data
			this.vipFlag = vipRes.data.data.vipFlag;
		}
  }

</script>
<style>
	.catalog-detail-wrap {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: url('./assets/page-bg.png') repeat left top ;
		background-size: cover;
		& .back-wrap {
			position: absolute;
			top: 0.8rem;
			left: 0;
			z-index: 3;
			color: #fff;
			font-size: 0.3rem;
			height: 0.66rem;
			padding: 0 0.3rem;
			border-top-right-radius: 0.33rem;
			border-bottom-right-radius: 0.33rem;
			background: rgba(0,0,0,0.5);
			line-height: 0.66rem;
			& .iconfont.icon-back-new {
				margin-right: 0.1rem;
			}
		}
			
		& .swiper-wrap {
			width: 100%;
			height: 7.6rem;
			box-shadow: 0 0 0.2rem rgba(118, 92, 55, 0.5 );

			& .slide-imgs {
				display: flex;
				align-items: center;
				justify-content: center;
				& img {
					max-width: 100%;
					object-fit: fill;
					-webkit-touch-callout: none;
					-webkit-user-select: none;
				}
			}

			& .last-slide {
				background: url('./assets/catalog-detail-swiper.jpg') no-repeat center;
				background-size: cover;
				height: 7.6rem;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				& .last-silde-text {
					padding-top: 0.5rem;
					text-align: center;
					font-size: 0.32rem;
					line-height: 0.45rem;
					color: #fff;
					text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
				}
				& .last-silde-text-img {
					margin-top: 0.7rem;
					width: 2.96rem;
					height: 0.98rem;
				}
			}
		}

		& >>> .swiper-pagination-bullet  {
			background: #fff;
			opacity: 1;
		}

		& >>> .swiper-pagination-bullet-active {
			background: #765c37;
		}

		& .text-wrap {
			margin-top: 0.36rem;
			padding: 0 0.6rem 0.6rem; 
			height: calc(100% - 7.6rem - 2.3rem);
			overflow: scroll;
			& .text {
				font-size: 0.3rem;
				color: #65461e;
				line-height: 0.45rem;
			}
		}

		& .text-shadow {
			position: relative;
			z-index: 2;
			height: 0.6rem;
			top: -0.5rem;
			left: 0;
			right: 0;
			background: linear-gradient(to top, #f3f3ee, rgba(243,243,238,0.4));
		}

		& .btn-wrap {
			position: absolute;
			left: 50%;
			margin-left: -2.05rem;
			width: 4.1rem;
			bottom: 0.7rem;
			& img {
				display: block;
				width: 4.1rem;
				height: 0.8rem;
			}
		}
	}
</style>